--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Node / ReticulumProjects / MeshChatX.git / files / meshchatx / src / frontend / components / micron-editor / MicronEditorPage.vue
Displaying Raw • Download
meshchatx/src/frontend/components/micron-editor/MicronEditorPage.vue 3ba7de9df735d1ee505f8ade34bf1950b83e64ea (3ba7de9d) Text, 13.92 KB
Tb4b4b4<Tff7b72templateTb4b4b4>
Tb4b4b4<Tff7b72div Te6edf3classTff7b72=Ta5d6ff"flex flex-col flex-1 overflow-hidden min-w-0 bg-slate-50 dark:bg-zinc-950"Tb4b4b4>
T8b949e<!-- Compact Header -->
Tb4b4b4<Tff7b72div
Te6edf3classTff7b72=Ta5d6ff"flex items-center justify-between px-4 py-2 border-b border-gray-200 dark:border-zinc-800 bg-white/50 dark:bg-zinc-900/50 backdrop-blur-sm shrink-0"
Tb4b4b4>
Tb4b4b4<Tff7b72div Te6edf3classTff7b72=Ta5d6ff"flex items-center gap-3"Tb4b4b4>
Tb4b4b4<Tff7b72div Te6edf3classTff7b72=Ta5d6ff"bg-teal-100 dark:bg-teal-900/30 p-1.5 rounded-xl shrink-0"Tb4b4b4>
Tb4b4b4<Tff7b72MaterialDesignIcon Te6edf3icon-nameTff7b72=Ta5d6ff"code-tags" Te6edf3classTff7b72=Ta5d6ff"size-5 text-teal-600 dark:text-teal-400" Tb4b4b4/Tb4b4b4>
Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>
Tb4b4b4<Tff7b72h1
Te6edf3classTff7b72=Ta5d6ff"text-sm font-bold text-gray-900 dark:text-white uppercase tracking-wider hidden sm:block truncate"
Tb4b4b4>
Tff7b72{{ Te6edf3$tTb4b4b4(Ta5d6ff"tools.micron_editor.title"Tb4b4b4) Tff7b72}}
Tb4b4b4<Tb4b4b4/Tff7b72h1Tb4b4b4>
Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>
Tb4b4b4<Tff7b72div Te6edf3classTff7b72=Ta5d6ff"flex items-center gap-2"Tb4b4b4>
Tb4b4b4<Tff7b72button
Te6edf3typeTff7b72=Ta5d6ff"button"
Te6edf3classTff7b72=Ta5d6ff"secondary-chip !py-1 !px-3 !text-red-500 hover:!bg-red-50 dark:hover:!bg-red-900/20"
Tb4b4b4@Te6edf3clickTff7b72=Ta5d6ff"Te6edf3resetAllTa5d6ff"
Tb4b4b4>
Tb4b4b4<Tff7b72MaterialDesignIcon Te6edf3icon-nameTff7b72=Ta5d6ff"refresh" Te6edf3classTff7b72=Ta5d6ff"w-3.5 h-3.5" Tb4b4b4/Tb4b4b4>
Tb4b4b4<Tff7b72span Te6edf3classTff7b72=Ta5d6ff"hidden sm:inline"Tb4b4b4>Tff7b72{{ Te6edf3$tTb4b4b4(Ta5d6ff"tools.micron_editor.reset"Tb4b4b4) Tff7b72}}Tb4b4b4<Tb4b4b4/Tff7b72spanTb4b4b4>
Tb4b4b4<Tb4b4b4/Tff7b72buttonTb4b4b4>
Tb4b4b4<Tff7b72button Te6edf3typeTff7b72=Ta5d6ff"button" Te6edf3classTff7b72=Ta5d6ff"secondary-chip !py-1 !px-3" Tb4b4b4@Te6edf3clickTff7b72=Ta5d6ff"Te6edf3downloadFileTa5d6ff"Tb4b4b4>
Tb4b4b4<Tff7b72MaterialDesignIcon Te6edf3icon-nameTff7b72=Ta5d6ff"download" Te6edf3classTff7b72=Ta5d6ff"w-3.5 h-3.5" Tb4b4b4/Tb4b4b4>
Tb4b4b4<Tff7b72span Te6edf3classTff7b72=Ta5d6ff"hidden sm:inline"Tb4b4b4>Tff7b72{{ Te6edf3$tTb4b4b4(Ta5d6ff"tools.micron_editor.download"Tb4b4b4) Tff7b72}}Tb4b4b4<Tb4b4b4/Tff7b72spanTb4b4b4>
Tb4b4b4<Tb4b4b4/Tff7b72buttonTb4b4b4>
Tb4b4b4<Tff7b72button Te6edf3v-ifTff7b72=Ta5d6ff"Te6edf3isMobileViewTa5d6ff" Te6edf3typeTff7b72=Ta5d6ff"button" Te6edf3classTff7b72=Ta5d6ff"primary-chip !py-1 !px-3" Tb4b4b4@Te6edf3clickTff7b72=Ta5d6ff"Te6edf3toggleViewTa5d6ff"Tb4b4b4>
Tb4b4b4<Tff7b72MaterialDesignIcon Tb4b4b4:Te6edf3icon-nameTff7b72=Ta5d6ff"Te6edf3showEditor Tff7b72? Ta5d6ff'eye' Tff7b72: Ta5d6ff'pencil'Ta5d6ff" Te6edf3classTff7b72=Ta5d6ff"w-3.5 h-3.5" Tb4b4b4/Tb4b4b4>
Tff7b72{{ Te6edf3showEditor Tff7b72? Te6edf3$tTb4b4b4(Ta5d6ff"tools.micron_editor.view_preview"Tb4b4b4) Tff7b72: Te6edf3$tTb4b4b4(Ta5d6ff"tools.micron_editor.edit"Tb4b4b4) Tff7b72}}
Tb4b4b4<Tb4b4b4/Tff7b72buttonTb4b4b4>
Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>
Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>
T8b949e<!-- Tab Bar -->
Tb4b4b4<Tff7b72div
Te6edf3classTff7b72=Ta5d6ff"flex items-center px-4 py-1 gap-1 border-b border-gray-200 dark:border-zinc-800 bg-slate-100 dark:bg-zinc-900 overflow-x-auto scrollbar-hide shrink-0"
Tb4b4b4>
Tb4b4b4<Tff7b72div
Te6edf3v-forTff7b72=Ta5d6ff"Tb4b4b4(Te6edf3tabTb4b4b4, Te6edf3indexTb4b4b4) Tff7b72in Te6edf3tabsTa5d6ff"
Tb4b4b4:Te6edf3keyTff7b72=Ta5d6ff"Te6edf3tabTb4b4b4.Te6edf3idTa5d6ff"
Te6edf3classTff7b72=Ta5d6ff"group flex items-center h-8 px-3 rounded-lg text-xs font-medium transition-colors cursor-pointer whitespace-nowrap"
Tb4b4b4:Te6edf3classTff7b72=Ta5d6ff"Tb4b4b4[
Te6edf3activeTabIndex Tff7b72=== Te6edf3index
Tff7b72? Ta5d6ff'bg-white dark:bg-zinc-800 text-teal-600 dark:text-teal-400 shadow-sm'
Tff7b72: Ta5d6ff'text-gray-500 hover:bg-white/50 dark:hover:bg-zinc-800/50 hover:text-gray-700 dark:hover:text-zinc-300'Tb4b4b4,
Tb4b4b4]Ta5d6ff"
Tb4b4b4@Te6edf3clickTff7b72=Ta5d6ff"Te6edf3activeTabIndex Tff7b72= Te6edf3indexTa5d6ff"
Tb4b4b4>
Tb4b4b4<Tff7b72span Te6edf3v-ifTff7b72=Ta5d6ff"Te6edf3editingTabIndex Tff7b72!== Te6edf3indexTa5d6ff" Tb4b4b4@Te6edf3dblclickTff7b72=Ta5d6ff"Te6edf3startEditingTabTb4b4b4(Te6edf3indexTb4b4b4)Ta5d6ff"Tb4b4b4>Tff7b72{{ Te6edf3tabTb4b4b4.Te6edf3name Tff7b72}}Tb4b4b4<Tb4b4b4/Tff7b72spanTb4b4b4>
Tb4b4b4<Tff7b72input
Te6edf3v-else
Te6edf3refTff7b72=Ta5d6ff"tabInput"
Te6edf3v-modelTff7b72=Ta5d6ff"Te6edf3editingTabNameTa5d6ff"
Te6edf3classTff7b72=Ta5d6ff"bg-transparent border-none focus:ring-0 w-20 p-0 text-inherit"
Tb4b4b4@Te6edf3blurTff7b72=Ta5d6ff"Te6edf3finishEditingTabTa5d6ff"
Tb4b4b4@Te6edf3keyupTb4b4b4.Te6edf3enterTff7b72=Ta5d6ff"Te6edf3finishEditingTabTa5d6ff"
@Te6edf3click.Te6edf3stop
Tb4b4b4/Tb4b4b4>
Tb4b4b4<Tff7b72button
Te6edf3v-ifTff7b72=Ta5d6ff"Te6edf3tabsTb4b4b4.Te6edf3length Tff7b72> T79c0ff1Ta5d6ff"
Te6edf3classTff7b72=Ta5d6ff"ml-2 opacity-0 group-hover:opacity-100 hover:text-red-500 transition-opacity"
Tb4b4b4@Te6edf3clickTb4b4b4.Te6edf3stopTff7b72=Ta5d6ff"Te6edf3removeTabTb4b4b4(Te6edf3indexTb4b4b4)Ta5d6ff"
Tb4b4b4>
Tb4b4b4<Tff7b72MaterialDesignIcon Te6edf3icon-nameTff7b72=Ta5d6ff"close" Te6edf3classTff7b72=Ta5d6ff"size-3" Tb4b4b4/Tb4b4b4>
Tb4b4b4<Tb4b4b4/Tff7b72buttonTb4b4b4>
Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>
Tb4b4b4<Tff7b72button
Te6edf3classTff7b72=Ta5d6ff"flex items-center justify-center size-8 text-gray-400 hover:text-teal-500 transition-colors"
Tb4b4b4@Te6edf3clickTff7b72=Ta5d6ff"Te6edf3addTabTa5d6ff"
Tb4b4b4>
Tb4b4b4<Tff7b72MaterialDesignIcon Te6edf3icon-nameTff7b72=Ta5d6ff"plus" Te6edf3classTff7b72=Ta5d6ff"size-4" Tb4b4b4/Tb4b4b4>
Tb4b4b4<Tb4b4b4/Tff7b72buttonTb4b4b4>
Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>
Tb4b4b4<Tff7b72div Te6edf3classTff7b72=Ta5d6ff"flex-1 flex overflow-hidden"Tb4b4b4>
T8b949e<!-- Editor Pane -->
Tb4b4b4<Tff7b72div
Te6edf3v-ifTff7b72=Ta5d6ff"Te6edf3tabsTb4b4b4.Te6edf3length Tff7b72> T79c0ff0Ta5d6ff"
Tb4b4b4:Te6edf3classTff7b72=Ta5d6ff"Tb4b4b4[
Ta5d6ff'flex-1 overflow-hidden flex flex-col'Tb4b4b4,
Te6edf3isMobileView Tff7b72&& Tff7b72!Te6edf3showEditor Tff7b72? Ta5d6ff'hidden' Tff7b72: Ta5d6ff''Tb4b4b4,
Tff7b72!Te6edf3isMobileView Tff7b72? Ta5d6ff'border-r border-gray-200 dark:border-zinc-800' Tff7b72: Ta5d6ff''Tb4b4b4,
Tb4b4b4]Ta5d6ff"
Tb4b4b4>
Tb4b4b4<Tff7b72textarea
Te6edf3refTff7b72=Ta5d6ff"editorRef"
Te6edf3v-modelTff7b72=Ta5d6ff"Te6edf3tabsTb4b4b4[Te6edf3activeTabIndexTb4b4b4]Tb4b4b4.Te6edf3contentTa5d6ff"
Te6edf3classTff7b72=Ta5d6ff"flex-1 w-full bg-white dark:bg-zinc-900 text-gray-900 dark:text-white p-4 font-mono text-sm resize-none focus:outline-none"
Tb4b4b4:Te6edf3placeholderTff7b72=Ta5d6ff"Te6edf3$tTb4b4b4(Ta5d6ff'tools.micron_editor.placeholder'Tb4b4b4)Ta5d6ff"
Tb4b4b4@Te6edf3inputTff7b72=Ta5d6ff"Te6edf3handleInputTa5d6ff"
Tb4b4b4>Tb4b4b4<Tb4b4b4/Tff7b72textareaTb4b4b4>
Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>
T8b949e<!-- Preview Pane (Always dark to match NomadNet browser vibe) -->
Tb4b4b4<Tff7b72div
Tb4b4b4:Te6edf3classTff7b72=Ta5d6ff"Tb4b4b4[
Ta5d6ff'flex-1 overflow-hidden flex flex-col bg-zinc-950'Tb4b4b4,
Te6edf3isMobileView Tff7b72&& Te6edf3showEditor Tff7b72? Ta5d6ff'hidden' Tff7b72: Ta5d6ff''Tb4b4b4,
Tb4b4b4]Ta5d6ff"
Tb4b4b4>
T8b949e<!-- eslint-disable vue/no-v-html -->
Tb4b4b4<Tff7b72div
Te6edf3refTff7b72=Ta5d6ff"previewRef"
Te6edf3classTff7b72=Ta5d6ff"flex-1 overflow-auto text-zinc-100 p-4 font-mono text-sm whitespace-pre-wrap break-words nodeContainer"
Te6edf3v-htmlTff7b72=Ta5d6ff"Te6edf3renderedContentTa5d6ff"
Tb4b4b4>Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>
T8b949e<!-- eslint-enable vue/no-v-html -->
Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>
Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>
Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>
Tb4b4b4<Tb4b4b4/Tff7b72templateTb4b4b4>
Tb4b4b4<Tff7b72scriptTb4b4b4>
Tff7b72import Te6edf3MaterialDesignIcon Tff7b72from Ta5d6ff"../MaterialDesignIcon.vue"Tb4b4b4;
Tff7b72import Te6edf3MicronParser Tff7b72from Ta5d6ff"micron-parser"Tb4b4b4;
Tff7b72import Tb4b4b4{ Te6edf3micronStorage Tb4b4b4} Tff7b72from Ta5d6ff"../../js/MicronStorage"Tb4b4b4;
Tff7b72export Tff7b72default Tb4b4b4{
Te6edf3nameTff7b72: Ta5d6ff"MicronEditorPage"Tb4b4b4,
Te6edf3componentsTff7b72: Tb4b4b4{
Te6edf3MaterialDesignIconTb4b4b4,
Tb4b4b4}Tb4b4b4,
Te6edf3dataTb4b4b4(Tb4b4b4) Tb4b4b4{
Tff7b72return Tb4b4b4{
Te6edf3tabsTff7b72: Tb4b4b4[Tb4b4b4]Tb4b4b4,
Te6edf3activeTabIndexTff7b72: T79c0ff0Tb4b4b4,
Te6edf3renderedContentTff7b72: Ta5d6ff""Tb4b4b4,
Te6edf3showEditorTff7b72: Tff7b72trueTb4b4b4,
Te6edf3isMobileViewTff7b72: Tff7b72falseTb4b4b4,
Te6edf3storageKeyTff7b72: Ta5d6ff"micron_editor_content"Tb4b4b4,
Te6edf3editingTabIndexTff7b72: Tff7b72-T79c0ff1Tb4b4b4,
Te6edf3editingTabNameTff7b72: Ta5d6ff""Tb4b4b4,
Tb4b4b4}Tb4b4b4;
Tb4b4b4}Tb4b4b4,
Te6edf3watchTff7b72: Tb4b4b4{
Te6edf3activeTabIndexTb4b4b4(Tb4b4b4) Tb4b4b4{
Tff7b72thisTb4b4b4.Te6edf3renderActiveTabTb4b4b4(Tb4b4b4)Tb4b4b4;
Tb4b4b4}Tb4b4b4,
Tb4b4b4}Tb4b4b4,
Tff7b72async Te6edf3mountedTb4b4b4(Tb4b4b4) Tb4b4b4{
Tff7b72await Tff7b72thisTb4b4b4.Te6edf3loadContentTb4b4b4(Tb4b4b4)Tb4b4b4;
Tff7b72thisTb4b4b4.Te6edf3handleResizeTb4b4b4(Tb4b4b4)Tb4b4b4;
Tffa657windowTb4b4b4.Te6edf3addEventListenerTb4b4b4(Ta5d6ff"resize"Tb4b4b4, Tff7b72thisTb4b4b4.Te6edf3handleResizeTb4b4b4)Tb4b4b4;
Tff7b72thisTb4b4b4.Te6edf3renderActiveTabTb4b4b4(Tb4b4b4)Tb4b4b4;
Tb4b4b4}Tb4b4b4,
Te6edf3beforeUnmountTb4b4b4(Tb4b4b4) Tb4b4b4{
Tffa657windowTb4b4b4.Te6edf3removeEventListenerTb4b4b4(Ta5d6ff"resize"Tb4b4b4, Tff7b72thisTb4b4b4.Te6edf3handleResizeTb4b4b4)Tb4b4b4;
Tb4b4b4}Tb4b4b4,
Te6edf3methodsTff7b72: Tb4b4b4{
Te6edf3handleResizeTb4b4b4(Tb4b4b4) Tb4b4b4{
Tff7b72thisTb4b4b4.Te6edf3isMobileView Tff7b72= Tffa657windowTb4b4b4.Te6edf3innerWidth Tff7b72< T79c0ff1024Tb4b4b4;
Tff7b72if Tb4b4b4(Tff7b72!Tff7b72thisTb4b4b4.Te6edf3isMobileViewTb4b4b4) Tb4b4b4{
Tff7b72thisTb4b4b4.Te6edf3showEditor Tff7b72= Tff7b72trueTb4b4b4;
Tb4b4b4}
Tb4b4b4}Tb4b4b4,
Te6edf3handleInputTb4b4b4(Tb4b4b4) Tb4b4b4{
Tff7b72thisTb4b4b4.Te6edf3renderActiveTabTb4b4b4(Tb4b4b4)Tb4b4b4;
Tff7b72thisTb4b4b4.Te6edf3saveContentTb4b4b4(Tb4b4b4)Tb4b4b4;
Tb4b4b4}Tb4b4b4,
Te6edf3renderActiveTabTb4b4b4(Tb4b4b4) Tb4b4b4{
Tff7b72if Tb4b4b4(Tff7b72thisTb4b4b4.Te6edf3tabsTb4b4b4.Te6edf3length Tff7b72=== T79c0ff0 Tff7b72|| Tff7b72!Tff7b72thisTb4b4b4.Te6edf3tabsTb4b4b4[Tff7b72thisTb4b4b4.Te6edf3activeTabIndexTb4b4b4]Tb4b4b4) Tb4b4b4{
Tff7b72thisTb4b4b4.Te6edf3renderedContent Tff7b72= Ta5d6ff""Tb4b4b4;
Tff7b72returnTb4b4b4;
Tb4b4b4}
Tff7b72try Tb4b4b4{
Tff7b72const Te6edf3parser Tff7b72= Tff7b72new Te6edf3MicronParserTb4b4b4(Tff7b72trueTb4b4b4)Tb4b4b4;
Tff7b72thisTb4b4b4.Te6edf3renderedContent Tff7b72= Te6edf3parserTb4b4b4.Te6edf3convertMicronToHtmlTb4b4b4(Tff7b72thisTb4b4b4.Te6edf3tabsTb4b4b4[Tff7b72thisTb4b4b4.Te6edf3activeTabIndexTb4b4b4]Tb4b4b4.Te6edf3contentTb4b4b4)Tb4b4b4;
Tb4b4b4} Tff7b72catch Tb4b4b4(Te6edf3errorTb4b4b4) Tb4b4b4{
Te6edf3consoleTb4b4b4.Te6edf3errorTb4b4b4(Ta5d6ff"Error rendering micron:"Tb4b4b4, Te6edf3errorTb4b4b4)Tb4b4b4;
Tff7b72thisTb4b4b4.Te6edf3renderedContent Tff7b72= Ta5d6ff`Ta5d6ff<p style="color: red;">Error rendering: Tffd700${Te6edf3errorTb4b4b4.Te6edf3messageTffd700}Ta5d6ff</p>Ta5d6ff`Tb4b4b4;
Tb4b4b4}
Tb4b4b4}Tb4b4b4,
Te6edf3toggleViewTb4b4b4(Tb4b4b4) Tb4b4b4{
Tff7b72thisTb4b4b4.Te6edf3showEditor Tff7b72= Tff7b72!Tff7b72thisTb4b4b4.Te6edf3showEditorTb4b4b4;
Tb4b4b4}Tb4b4b4,
Tff7b72async Te6edf3saveContentTb4b4b4(Tb4b4b4) Tb4b4b4{
Tff7b72try Tb4b4b4{
Tff7b72await Te6edf3micronStorageTb4b4b4.Te6edf3saveTabsTb4b4b4(Tff7b72thisTb4b4b4.Te6edf3tabsTb4b4b4)Tb4b4b4;
Tb4b4b4} Tff7b72catch Tb4b4b4(Te6edf3errorTb4b4b4) Tb4b4b4{
Te6edf3consoleTb4b4b4.Te6edf3warnTb4b4b4(Ta5d6ff"Failed to save content to IndexedDB:"Tb4b4b4, Te6edf3errorTb4b4b4)Tb4b4b4;
Tb4b4b4}
Tb4b4b4}Tb4b4b4,
Tff7b72async Te6edf3loadContentTb4b4b4(Tb4b4b4) Tb4b4b4{
Tff7b72try Tb4b4b4{
Tff7b72const Te6edf3savedTabs Tff7b72= Tff7b72await Te6edf3micronStorageTb4b4b4.Te6edf3loadTabsTb4b4b4(Tb4b4b4)Tb4b4b4;
Tff7b72if Tb4b4b4(Te6edf3savedTabs Tff7b72&& Te6edf3savedTabsTb4b4b4.Te6edf3length Tff7b72> T79c0ff0Tb4b4b4) Tb4b4b4{
Tff7b72thisTb4b4b4.Te6edf3tabs Tff7b72= Te6edf3savedTabsTb4b4b4;
Tb4b4b4} Tff7b72else Tb4b4b4{
T8b949e// Try to migrate from localStorage
Tff7b72const Te6edf3oldContent Tff7b72= Te6edf3localStorageTb4b4b4.Te6edf3getItemTb4b4b4(Tff7b72thisTb4b4b4.Te6edf3storageKeyTb4b4b4)Tb4b4b4;
Tff7b72if Tb4b4b4(Te6edf3oldContentTb4b4b4) Tb4b4b4{
Tff7b72thisTb4b4b4.Te6edf3tabs Tff7b72= Tb4b4b4[
Tb4b4b4{
Te6edf3idTff7b72: Tffa657DateTb4b4b4.Te6edf3nowTb4b4b4(Tb4b4b4)Tb4b4b4,
Te6edf3nameTff7b72: Tff7b72thisTb4b4b4.Te6edf3$tTb4b4b4(Ta5d6ff"tools.micron_editor.main_tab"Tb4b4b4)Tb4b4b4,
Te6edf3contentTff7b72: Te6edf3oldContentTb4b4b4,
Tb4b4b4}Tb4b4b4,
Tb4b4b4]Tb4b4b4;
Te6edf3localStorageTb4b4b4.Te6edf3removeItemTb4b4b4(Tff7b72thisTb4b4b4.Te6edf3storageKeyTb4b4b4)Tb4b4b4;
Tff7b72await Te6edf3micronStorageTb4b4b4.Te6edf3saveTabsTb4b4b4(Tff7b72thisTb4b4b4.Te6edf3tabsTb4b4b4)Tb4b4b4;
Tb4b4b4} Tff7b72else Tb4b4b4{
Tff7b72thisTb4b4b4.Te6edf3tabs Tff7b72= Tb4b4b4[Tff7b72thisTb4b4b4.Te6edf3createDefaultTabTb4b4b4(Tb4b4b4)Tb4b4b4]Tb4b4b4;
Tff7b72await Te6edf3micronStorageTb4b4b4.Te6edf3saveTabsTb4b4b4(Tff7b72thisTb4b4b4.Te6edf3tabsTb4b4b4)Tb4b4b4;
Tb4b4b4}
Tb4b4b4}
Tb4b4b4} Tff7b72catch Tb4b4b4(Te6edf3errorTb4b4b4) Tb4b4b4{
Te6edf3consoleTb4b4b4.Te6edf3warnTb4b4b4(Ta5d6ff"Failed to load content from IndexedDB:"Tb4b4b4, Te6edf3errorTb4b4b4)Tb4b4b4;
Tff7b72thisTb4b4b4.Te6edf3tabs Tff7b72= Tb4b4b4[Tff7b72thisTb4b4b4.Te6edf3createDefaultTabTb4b4b4(Tb4b4b4)Tb4b4b4]Tb4b4b4;
Tb4b4b4}
Tff7b72thisTb4b4b4.Te6edf3activeTabIndex Tff7b72= T79c0ff0Tb4b4b4;
Tb4b4b4}Tb4b4b4,
Te6edf3createDefaultTabTb4b4b4(Tb4b4b4) Tb4b4b4{
Tff7b72return Tb4b4b4{
Te6edf3idTff7b72: Tffa657DateTb4b4b4.Te6edf3nowTb4b4b4(Tb4b4b4)Tb4b4b4,
Te6edf3nameTff7b72: Tff7b72thisTb4b4b4.Te6edf3$tTb4b4b4(Ta5d6ff"tools.micron_editor.main_tab"Tb4b4b4)Tb4b4b4,
Te6edf3contentTff7b72: Tff7b72thisTb4b4b4.Te6edf3getDefaultContentTb4b4b4(Tb4b4b4)Tb4b4b4,
Tb4b4b4}Tb4b4b4;
Tb4b4b4}Tb4b4b4,
Te6edf3addTabTb4b4b4(Tb4b4b4) Tb4b4b4{
Tff7b72const Te6edf3newTab Tff7b72= Tb4b4b4{
Te6edf3idTff7b72: Tffa657DateTb4b4b4.Te6edf3nowTb4b4b4(Tb4b4b4)Tb4b4b4,
Te6edf3nameTff7b72: Ta5d6ff`Tffd700${Tff7b72thisTb4b4b4.Te6edf3$tTb4b4b4(Ta5d6ff"tools.micron_editor.new_tab"Tb4b4b4)Tffd700}Ta5d6ff Tffd700${Tff7b72thisTb4b4b4.Te6edf3tabsTb4b4b4.Te6edf3length Tff7b72+ T79c0ff1Tffd700}Ta5d6ff`Tb4b4b4,
Te6edf3contentTff7b72: Ta5d6ff""Tb4b4b4,
Tb4b4b4}Tb4b4b4;
Tff7b72thisTb4b4b4.Te6edf3tabsTb4b4b4.Te6edf3pushTb4b4b4(Te6edf3newTabTb4b4b4)Tb4b4b4;
Tff7b72thisTb4b4b4.Te6edf3activeTabIndex Tff7b72= Tff7b72thisTb4b4b4.Te6edf3tabsTb4b4b4.Te6edf3length Tff7b72- T79c0ff1Tb4b4b4;
Tff7b72thisTb4b4b4.Te6edf3saveContentTb4b4b4(Tb4b4b4)Tb4b4b4;
Tb4b4b4}Tb4b4b4,
Te6edf3removeTabTb4b4b4(Te6edf3indexTb4b4b4) Tb4b4b4{
Tff7b72if Tb4b4b4(Te6edf3confirmTb4b4b4(Tff7b72thisTb4b4b4.Te6edf3$tTb4b4b4(Ta5d6ff"tools.micron_editor.confirm_delete_tab"Tb4b4b4)Tb4b4b4)Tb4b4b4) Tb4b4b4{
Tff7b72thisTb4b4b4.Te6edf3tabsTb4b4b4.Te6edf3spliceTb4b4b4(Te6edf3indexTb4b4b4, T79c0ff1Tb4b4b4)Tb4b4b4;
Tff7b72if Tb4b4b4(Tff7b72thisTb4b4b4.Te6edf3activeTabIndex Tff7b72>= Tff7b72thisTb4b4b4.Te6edf3tabsTb4b4b4.Te6edf3lengthTb4b4b4) Tb4b4b4{
Tff7b72thisTb4b4b4.Te6edf3activeTabIndex Tff7b72= Tffa657MathTb4b4b4.Te6edf3maxTb4b4b4(T79c0ff0Tb4b4b4, Tff7b72thisTb4b4b4.Te6edf3tabsTb4b4b4.Te6edf3length Tff7b72- T79c0ff1Tb4b4b4)Tb4b4b4;
Tb4b4b4}
Tff7b72thisTb4b4b4.Te6edf3saveContentTb4b4b4(Tb4b4b4)Tb4b4b4;
Tb4b4b4}
Tb4b4b4}Tb4b4b4,
Te6edf3startEditingTabTb4b4b4(Te6edf3indexTb4b4b4) Tb4b4b4{
Tff7b72thisTb4b4b4.Te6edf3editingTabIndex Tff7b72= Te6edf3indexTb4b4b4;
Tff7b72thisTb4b4b4.Te6edf3editingTabName Tff7b72= Tff7b72thisTb4b4b4.Te6edf3tabsTb4b4b4[Te6edf3indexTb4b4b4]Tb4b4b4.Te6edf3nameTb4b4b4;
Tff7b72thisTb4b4b4.Te6edf3$nextTickTb4b4b4(Tb4b4b4(Tb4b4b4) Tb4b4b4=> Tb4b4b4{
Tff7b72if Tb4b4b4(Tff7b72thisTb4b4b4.Te6edf3$refsTb4b4b4.Te6edf3tabInput Tff7b72&& Tff7b72thisTb4b4b4.Te6edf3$refsTb4b4b4.Te6edf3tabInputTb4b4b4[T79c0ff0Tb4b4b4]Tb4b4b4) Tb4b4b4{
Tff7b72thisTb4b4b4.Te6edf3$refsTb4b4b4.Te6edf3tabInputTb4b4b4[T79c0ff0Tb4b4b4]Tb4b4b4.Te6edf3focusTb4b4b4(Tb4b4b4)Tb4b4b4;
Tb4b4b4}
Tb4b4b4}Tb4b4b4)Tb4b4b4;
Tb4b4b4}Tb4b4b4,
Te6edf3finishEditingTabTb4b4b4(Tb4b4b4) Tb4b4b4{
Tff7b72if Tb4b4b4(Tff7b72thisTb4b4b4.Te6edf3editingTabIndex Tff7b72!== Tff7b72-T79c0ff1Tb4b4b4) Tb4b4b4{
Tff7b72if Tb4b4b4(Tff7b72thisTb4b4b4.Te6edf3editingTabNameTb4b4b4.Te6edf3trimTb4b4b4(Tb4b4b4)Tb4b4b4) Tb4b4b4{
Tff7b72thisTb4b4b4.Te6edf3tabsTb4b4b4[Tff7b72thisTb4b4b4.Te6edf3editingTabIndexTb4b4b4]Tb4b4b4.Te6edf3name Tff7b72= Tff7b72thisTb4b4b4.Te6edf3editingTabNameTb4b4b4.Te6edf3trimTb4b4b4(Tb4b4b4)Tb4b4b4;
Tb4b4b4}
Tff7b72thisTb4b4b4.Te6edf3editingTabIndex Tff7b72= Tff7b72-T79c0ff1Tb4b4b4;
Tff7b72thisTb4b4b4.Te6edf3saveContentTb4b4b4(Tb4b4b4)Tb4b4b4;
Tb4b4b4}
Tb4b4b4}Tb4b4b4,
Tff7b72async Te6edf3resetAllTb4b4b4(Tb4b4b4) Tb4b4b4{
Tff7b72if Tb4b4b4(Te6edf3confirmTb4b4b4(Tff7b72thisTb4b4b4.Te6edf3$tTb4b4b4(Ta5d6ff"tools.micron_editor.confirm_reset"Tb4b4b4)Tb4b4b4)Tb4b4b4) Tb4b4b4{
Tff7b72await Te6edf3micronStorageTb4b4b4.Te6edf3clearAllTb4b4b4(Tb4b4b4)Tb4b4b4;
Tff7b72thisTb4b4b4.Te6edf3tabs Tff7b72= Tb4b4b4[Tff7b72thisTb4b4b4.Te6edf3createDefaultTabTb4b4b4(Tb4b4b4)Tb4b4b4]Tb4b4b4;
Tff7b72thisTb4b4b4.Te6edf3activeTabIndex Tff7b72= T79c0ff0Tb4b4b4;
Tff7b72thisTb4b4b4.Te6edf3renderActiveTabTb4b4b4(Tb4b4b4)Tb4b4b4;
Tff7b72await Tff7b72thisTb4b4b4.Te6edf3saveContentTb4b4b4(Tb4b4b4)Tb4b4b4;
Tb4b4b4}
Tb4b4b4}Tb4b4b4,
Te6edf3getDefaultContentTb4b4b4(Tb4b4b4) Tb4b4b4{
Tff7b72const Te6edf3b Tff7b72= Ta5d6ff"`"Tb4b4b4;
Tff7b72return Ta5d6ff`Tffd700${Te6edf3bTffd700}Ta5d6ffFfd0
Tffd700${Te6edf3bTffd700}Ta5d6ff=
_ _
(_) (_)
_ __ ___ _ ___ _ __ ___ _ __ ______ _ __ __ _ _ __ ___ ___ _ __ _ ___
| '_ Ta5d6ff\`Ta5d6ff _ Ta5d6ff\\Ta5d6ff| |/ __| '__/ _ Ta5d6ff\\Ta5d6ff| '_ Ta5d6ff\\Ta5d6ff______| '_ Ta5d6ff\\Ta5d6ff / _Ta5d6ff\`Ta5d6ff | '__/ __|/ _ Ta5d6ff\\Ta5d6ff '__| / __|
| | | | | | | (__| | | (_) | | | | | |_) | (_| | | Ta5d6ff\\Ta5d6ff__ Ta5d6ff\\Ta5d6ff\\Ta5d6ff __/ |_ | Ta5d6ff\\Ta5d6ff__ Ta5d6ff\\Ta5d6ff\\
Ta5d6ff |_| |_| |_|_|Ta5d6ff\\Ta5d6ff___|_| Ta5d6ff\\Ta5d6ff___/|_| |_| | .__/ Ta5d6ff\\Ta5d6ff__,_|_| |___/Ta5d6ff\\Ta5d6ff___|_(_)| |___/
| | _/ |
|_| |__/
Tffd700${Te6edf3bTffd700}Ta5d6ff=
Tffd700${Te6edf3bTffd700}Ta5d6fff
Tffd700${Te6edf3bTffd700}Ta5d6ff!Welcome to Micron EditorTffd700${Te6edf3bTffd700}Ta5d6ff!
Micron is a lightweight, terminal-friendly monospace markdown format used in Reticulum applications.
Tffd700${Te6edf3bTffd700}Ta5d6ff!With Micron, you canTffd700${Te6edf3bTffd700}Tffd700${Te6edf3bTffd700}Ta5d6ff:
Tffd700${Te6edf3bTffd700}Ta5d6ffc AlignTffd700${Te6edf3bTffd700}Ta5d6ffb
Tffd700${Te6edf3bTffd700}Ta5d6ffr text,
Tffd700${Te6edf3bTffd700}Ta5d6ffa
Tffd700${Te6edf3bTffd700}Ta5d6ffc
set Tffd700${Te6edf3bTffd700}Ta5d6ffB005 backgrounds, Tffd700${Te6edf3bTffd700}Ta5d6ffb and Tffd700${Te6edf3bTffd700}Ta5d6ff*Tffd700${Te6edf3bTffd700}Ta5d6ff Tffd700${Te6edf3bTffd700}Ta5d6ffB777Tffd700${Te6edf3bTffd700}Ta5d6ffFfffcombine any number ofTffd700${Te6edf3bTffd700}Ta5d6fffTffd700${Te6edf3bTffd700}Ta5d6ffbTffd700${Te6edf3bTffd700}Ta5d6ff_Tffd700${Te6edf3bTffd700}Ta5d6ff_ Tffd700${Te6edf3bTffd700}Ta5d6ffFf00fTffd700${Te6edf3bTffd700}Ta5d6ffFf80oTffd700${Te6edf3bTffd700}Ta5d6ffFfd0rTffd700${Te6edf3bTffd700}Ta5d6ffF9f0mTffd700${Te6edf3bTffd700}Ta5d6ffF0f2aTffd700${Te6edf3bTffd700}Ta5d6ffF0fdtTffd700${Te6edf3bTffd700}Ta5d6ffF07ftTffd700${Te6edf3bTffd700}Ta5d6ffF43fiTffd700${Te6edf3bTffd700}Ta5d6ffF70fnTffd700${Te6edf3bTffd700}Ta5d6ffFe0fg Tffd700${Te6edf3bTffd700}Ta5d6ffftags.
Tffd700${Te6edf3bTffd700}Tffd700${Te6edf3bTffd700}
Ta5d6ff
Getting Started
Start editing your Micron markup in the editor pane. The preview will update automatically.
Formatting
Text can be Tffd700${Te6edf3bTffd700}Ta5d6ff!boldTffd700${Te6edf3bTffd700}Ta5d6ff! by using Ta5d6ff\\Tffd700${Te6edf3bTffd700}Ta5d6ff!, Ta5d6ff\\Tffd700${Te6edf3bTffd700}Ta5d6ff_, and Ta5d6ff\\Tffd700${Te6edf3bTffd700}Ta5d6ff*.
Colors
Foreground colors: Tffd700${Te6edf3bTffd700}Ta5d6ffFf00Tffd700${Te6edf3bTffd700}Ta5d6ffFf80oTffd700${Te6edf3bTffd700}Ta5d6ffFfd0rTffd700${Te6edf3bTffd700}Ta5d6ffF9f0mTffd700${Te6edf3bTffd700}Ta5d6ffF0f2aTffd700${Te6edf3bTffd700}Ta5d6ffF0fdtTffd700${Te6edf3bTffd700}Ta5d6ffF07ftTffd700${Te6edf3bTffd700}Ta5d6ffF43fiTffd700${Te6edf3bTffd700}Ta5d6ffF70fnTffd700${Te6edf3bTffd700}Ta5d6ffFe0fgTffd700${Te6edf3bTffd700}Ta5d6fff
Background colors: Tffd700${Te6edf3bTffd700}Ta5d6ffBf00Tffd700${Te6edf3bTffd700}Ta5d6ffBf80oTffd700${Te6edf3bTffd700}Ta5d6ffBfd0rTffd700${Te6edf3bTffd700}Ta5d6ffB9f0mTffd700${Te6edf3bTffd700}Ta5d6ffB0f2aTffd700${Te6edf3bTffd700}Ta5d6ffB0fdtTffd700${Te6edf3bTffd700}Ta5d6ffB07ftTffd700${Te6edf3bTffd700}Ta5d6ffB43fiTffd700${Te6edf3bTffd700}Ta5d6ffB70fnTffd700${Te6edf3bTffd700}Ta5d6ffBe0fgTffd700${Te6edf3bTffd700}Ta5d6ffb
Links
Create links with Ta5d6ff\\Tffd700${Te6edf3bTffd700}Ta5d6ff[ tag: Tffd700${Te6edf3bTffd700}Ta5d6ff_Tffd700${Te6edf3bTffd700}Ta5d6ff[Example LinkTffd700${Te6edf3bTffd700}Ta5d6ffexample.com]Tffd700${Te6edf3bTffd700}Ta5d6ff]Tffd700${Te6edf3bTffd700}Ta5d6ff_
Literals
Use Ta5d6ff\\Tffd700${Te6edf3bTffd700}Ta5d6ff= to start/end literal blocks that won't be interpreted.
Tffd700${Te6edf3bTffd700}Ta5d6ff=
This is a literal block
Tffd700${Te6edf3bTffd700}Ta5d6ff=
Ta5d6ff`Tb4b4b4;
Tb4b4b4}Tb4b4b4,
Te6edf3downloadFileTb4b4b4(Tb4b4b4) Tb4b4b4{
Tff7b72const Te6edf3content Tff7b72= Tff7b72thisTb4b4b4.Te6edf3tabsTb4b4b4[Tff7b72thisTb4b4b4.Te6edf3activeTabIndexTb4b4b4]Tb4b4b4.Te6edf3contentTb4b4b4;
Tff7b72const Te6edf3blob Tff7b72= Tff7b72new Te6edf3BlobTb4b4b4(Tb4b4b4[Te6edf3contentTb4b4b4]Tb4b4b4, Tb4b4b4{ Te6edf3typeTff7b72: Ta5d6ff"text/plain" Tb4b4b4}Tb4b4b4)Tb4b4b4;
Tff7b72const Te6edf3url Tff7b72= Te6edf3URLTb4b4b4.Te6edf3createObjectURLTb4b4b4(Te6edf3blobTb4b4b4)Tb4b4b4;
Tff7b72const Te6edf3a Tff7b72= Tffa657documentTb4b4b4.Te6edf3createElementTb4b4b4(Ta5d6ff"a"Tb4b4b4)Tb4b4b4;
Te6edf3aTb4b4b4.Te6edf3href Tff7b72= Te6edf3urlTb4b4b4;
Te6edf3aTb4b4b4.Te6edf3download Tff7b72= Ta5d6ff`Tffd700${Tff7b72thisTb4b4b4.Te6edf3tabsTb4b4b4[Tff7b72thisTb4b4b4.Te6edf3activeTabIndexTb4b4b4]Tb4b4b4.Te6edf3nameTb4b4b4.Te6edf3replaceTb4b4b4(Ta5d6ff/\s+/gTb4b4b4, Ta5d6ff"_"Tb4b4b4)Tffd700}Ta5d6ff.muTa5d6ff`Tb4b4b4;
Tffa657documentTb4b4b4.Te6edf3bodyTb4b4b4.Te6edf3appendChildTb4b4b4(Te6edf3aTb4b4b4)Tb4b4b4;
Te6edf3aTb4b4b4.Te6edf3clickTb4b4b4(Tb4b4b4)Tb4b4b4;
Tffa657documentTb4b4b4.Te6edf3bodyTb4b4b4.Te6edf3removeChildTb4b4b4(Te6edf3aTb4b4b4)Tb4b4b4;
Te6edf3URLTb4b4b4.Te6edf3revokeObjectURLTb4b4b4(Te6edf3urlTb4b4b4)Tb4b4b4;
Tb4b4b4}Tb4b4b4,
Tb4b4b4}Tb4b4b4,
Tb4b4b4}Tb4b4b4;
Tb4b4b4<Tb4b4b4/Tff7b72scriptTb4b4b4>
Tb4b4b4<Tff7b72style Te6edf3scopedTb4b4b4>
Tb4b4b4.T56d364nodeContainer Tb4b4b4{
Tff7b72font-familyTb4b4b4:
Te6edf3Roboto Te6edf3Mono Te6edf3Nerd Te6edf3FontTb4b4b4,
Tff7b72monospaceTb4b4b4;
Tff7b72line-heightTb4b4b4: Tff7b72normalTb4b4b4;
Tb4b4b4}
Tb4b4b4:Tf0883edeepTff7b72(Tb4b4b4.T56d364Mu-nlTff7b72) Tb4b4b4{
Tff7b72cursorTb4b4b4: Tff7b72pointerTb4b4b4;
Tb4b4b4}
Tb4b4b4:Tf0883edeepTff7b72(Tb4b4b4.T56d364Mu-mntTff7b72) Tb4b4b4{
Tff7b72displayTb4b4b4: Tff7b72inline-blockTb4b4b4;
Tff7b72widthTb4b4b4: T79c0ff0.6Tffa657emTb4b4b4;
Tff7b72text-alignTb4b4b4: Tff7b72centerTb4b4b4;
Tff7b72white-spaceTb4b4b4: Tff7b72preTb4b4b4;
Tff7b72text-decorationTb4b4b4: Tff7b72inheritTb4b4b4;
Tb4b4b4}
Tb4b4b4:Tf0883edeepTff7b72(Tb4b4b4.T56d364Mu-mwsTff7b72) Tb4b4b4{
Tff7b72text-decorationTb4b4b4: Tff7b72inheritTb4b4b4;
Tff7b72displayTb4b4b4: Tff7b72inline-blockTb4b4b4;
Tb4b4b4}
Tb4b4b4:Tf0883edeepTff7b72(Tff7b72aTb4b4b4:Tf0883ehoverTff7b72) Tb4b4b4{
Tff7b72text-decorationTb4b4b4: Tff7b72underlineTb4b4b4;
Tb4b4b4}
Tb4b4b4.T56d364scrollbar-hideTb4b4b4::Tf0883e-webkit-scrollbar Tb4b4b4{
Tff7b72displayTb4b4b4: Tff7b72noneTb4b4b4;
Tb4b4b4}
Tb4b4b4.T56d364scrollbar-hide Tb4b4b4{
Tff7b72-ms-Te6edf3overflow-styleTb4b4b4: Tff7b72noneTb4b4b4;
Tff7b72scrollbar-widthTb4b4b4: Tff7b72noneTb4b4b4;
Tb4b4b4}
Tb4b4b4<Tb4b4b4/Tff7b72styleTb4b4b4>
──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────